<template>
  <div>
    <div v-if="debugInfo" class="debug-info">
      <p>数据类型: {{ isArrayData(jsonData) ? '数组' : '对象' }}</p>
      <p>列数量: {{ columns.length }}</p>
      <p>行数量: {{ dataSource.length }}</p>
    </div>
    
    <a-table 
      :columns="columns" 
      :data-source="dataSource" 
      :pagination="false"
      bordered
    >
      <template #bodyCell="{ column, text, record }">
        <div v-if="column.dataIndex">
          <a-input
            v-if="editableCell === `${record.key}-${column.dataIndex}`"
            v-model:value="editValue"
            @blur="handleSave(record.key, column.dataIndex)"
            @pressEnter="handleSave(record.key, column.dataIndex)"
            autoFocus
          />
          <div v-else @click="handleEdit(record.key, column.dataIndex, text)" class="editable-cell">
            {{ formatValue(text) }}
          </div>
        </div>
      </template>
    </a-table>
    
    <div style="margin-top: 16px; text-align: right;">
      <a-button type="primary" @click="saveData">保存</a-button>
    </div>
  </div>
</template>

<script setup>
import { ref, watch, reactive, onMounted } from 'vue';

const props = defineProps({
  data: {
    type: [Object, Array],
    required: true,
  },
});

const emit = defineEmits(['save']);

const columns = ref([]);
const dataSource = ref([]);
const editableCell = ref('');
const editValue = ref('');
const jsonData = ref({});
const debugInfo = ref(true);

// 检查数据是否为数组
const isArrayData = (data) => {
  return Array.isArray(data);
};

// 递归处理对象，生成列结构
const processObject = (obj, parentKey = '') => {
  const columnList = [];
  
  for (const key in obj) {
    const value = obj[key];
    const currentKey = parentKey ? `${parentKey}.${key}` : key;
    
    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
      // 嵌套对象
      const children = processObject(value, currentKey);
      if (children.length > 0) {
        columnList.push({
          title: key,
          key: currentKey,
          children: children
        });
      }
    } else {
      // 叶子节点
      columnList.push({
        title: key,
        dataIndex: currentKey,
        key: currentKey
      });
    }
  }
  
  return columnList;
};

// 从对象生成列结构
const generateColumnsFromObject = (obj) => {
  const result = [];
  
  // 检查是否所有值都是数组或对象
  const allValuesAreArraysOrObjects = Object.values(obj).every(value => 
    Array.isArray(value) || (typeof value === 'object' && value !== null)
  );
  
  // 检查是否所有值都是数组
  const allValuesAreArrays = Object.values(obj).every(value => Array.isArray(value));
  
  if (allValuesAreArraysOrObjects) {
    // 如果是数组，使用第一个数组的第一个对象来生成列结构
    let firstItem;
    if (allValuesAreArrays) {
      const firstArray = Object.values(obj)[0];
      if (firstArray.length > 0) {
        firstItem = firstArray[0];
      }
    } else {
      // 如果是对象，直接使用第一个对象
      firstItem = Object.values(obj)[0];
    }

    if (firstItem) {
      // 添加分类列
      result.push({
        title: '分类',
        dataIndex: 'category',
        key: 'category',
        fixed: 'left'
      });
      // 处理其他列
      for (const key in firstItem) {
        if (typeof firstItem[key] === 'object' && firstItem[key] !== null) {
          // 如果值是对象，递归处理
          const nestedColumns = processObject(firstItem[key], key);
          result.push({
            title: key,
            key: key,
            children: nestedColumns
          });
        } else {
          result.push({
            title: key,
            dataIndex: key,
            key: key
          });
        }
      }
      return result;
    }
  }
  
  // 处理顶级属性
  for (const key in obj) {
    const value = obj[key];
    
    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
      // 嵌套对象
      const children = processObject(value, key);
      result.push({
        title: key,
        key,
        children
      });
    } else {
      // 基本类型或数组
      result.push({
        title: key,
        dataIndex: key,
        key
      });
    }
  }
  
  return result;
};

// 将嵌套对象扁平化
const flattenObject = (obj, prefix = '') => {
  const flattened = {};
  
  for (const key in obj) {
    const value = obj[key];
    const fullKey = prefix ? `${prefix}.${key}` : key;
    
    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
      // 嵌套对象，递归处理
      Object.assign(flattened, flattenObject(value, fullKey));
    } else {
      // 基本类型或数组
      flattened[fullKey] = value;
    }
  }
  
  return flattened;
};

// 将扁平数据转回嵌套结构
const unflattenObject = (flatObj) => {
  const result = {};
  
  for (const key in flatObj) {
    if (key === 'key') continue; // 跳过表格的key字段
    
    const keys = key.split('.');
    let current = result;
    
    for (let i = 0; i < keys.length; i++) {
      const k = keys[i];
      if (i === keys.length - 1) {
        // 最后一级，设置值
        current[k] = flatObj[key];
      } else {
        // 中间层级，确保对象存在
        current[k] = current[k] || {};
        current = current[k];
      }
    }
  }
  
  return result;
};

// 处理数组类型的数据
const processArrayData = (data) => {
  if (!Array.isArray(data) || data.length === 0) {
    console.error('数据不是数组或为空数组');
    return { columns: [], data: [] };
  }
  
  try {
    // 使用第一个对象来生成列结构
    const firstItem = data[0];
    console.log('第一项数据:', firstItem);
    
    // 生成列结构
    const cols = generateColumnsFromObject(firstItem);
    console.log('生成的列结构:', cols);
    
    // 生成表格数据
    const tableData = data.map((item, index) => {
      const flattenedData = flattenObject(item);
      return {
        key: index.toString(),
        ...flattenedData
      };
    });
    console.log('生成的表格数据:', tableData);
    
    return { columns: cols, data: tableData };
  } catch (error) {
    console.error('处理数组数据时出错:', error);
    return { columns: [], data: [] };
  }
};

// 更新表格
const updateTable = () => {
  console.log('更新表格, 数据:', jsonData.value);
  
  try {
    if (isArrayData(jsonData.value)) {
      console.log('处理数组类型数据');
      const { columns: arrayCols, data: arrayData } = processArrayData(jsonData.value);
      columns.value = arrayCols;
      dataSource.value = arrayData;
    } else {
      console.log('处理对象类型数据');
      // 检查是否所有值都是数组
      const allValuesAreArrays = Object.values(jsonData.value).every(value => Array.isArray(value));
      // 检查是否所有值都是对象
      const allValuesAreObjects = Object.values(jsonData.value).every(
        value => typeof value === 'object' && value !== null && !Array.isArray(value)
      );
      
      if (allValuesAreArrays || allValuesAreObjects) {
        // 特殊处理：所有值都是数组或对象的情况
        const cols = generateColumnsFromObject(jsonData.value);
        const flatData = [];
        
        // 遍历每个分类及其数据
        for (const category in jsonData.value) {
          const value = jsonData.value[category];
          if (Array.isArray(value)) {
            // 处理数组类型的值
            value.forEach((item, index) => {
              flatData.push({
                key: `${category}-${index}`,
                category: category,
                ...flattenObject(item)
              });
            });
          } else if (typeof value === 'object' && value !== null) {
            // 处理对象类型的值
            flatData.push({
              key: `${category}-0`,
              category: category,
              ...flattenObject(value)
            });
          }
        }
        
        columns.value = cols;
        dataSource.value = flatData;
      } else {
        console.log('处理普通对象类型数据');
        const cols = generateColumnsFromObject(jsonData.value);
        const flatData = flattenObject(jsonData.value);
        columns.value = cols;
        dataSource.value = [{ key: '0', ...flatData }];
      }
    }
  } catch (error) {
    console.error('更新表格时出错:', error);
  }
};

// 格式化单元格值
const formatValue = (value) => {
  if (value === undefined || value === null) {
    return '';
  }
  
  if (Array.isArray(value)) {
    return value.join(', ');
  }
  
  return value.toString();
};

// 处理单元格编辑
const handleEdit = (key, dataIndex, text) => {
  editableCell.value = `${key}-${dataIndex}`;
  editValue.value = text;
};

// 保存单元格编辑
const handleSave = (key, dataIndex) => {
  // 更新数据源
  const targetRow = dataSource.value.find(item => item.key === key);
  if (targetRow) {
    targetRow[dataIndex] = editValue.value;
    
    if (isArrayData(jsonData.value)) {
      // 更新数组中的对应项
      const index = parseInt(key);
      if (!isNaN(index) && index >= 0 && index < jsonData.value.length) {
        // 将扁平数据转回嵌套结构
        const keys = dataIndex.split('.');
        let current = jsonData.value[index];
        
        for (let i = 0; i < keys.length - 1; i++) {
          if (!current[keys[i]]) {
            current[keys[i]] = {};
          }
          current = current[keys[i]];
        }
        
        current[keys[keys.length - 1]] = editValue.value;
      }
    } else {
      // 检查是否是分类数据结构
      const [category, index] = key.split('-');
      if (jsonData.value[category]) {
        if (dataIndex === 'category') {
          // 如果修改的是分类列，需要移动数据到新分类
          let oldData;
          if (Array.isArray(jsonData.value[category])) {
            // 如果是数组，获取并删除特定索引的数据
            oldData = {...jsonData.value[category][index]};
            jsonData.value[category].splice(index, 1);
          } else {
            // 如果是对象，获取并删除整个对象
            oldData = {...jsonData.value[category]};
            delete jsonData.value[category];
          }
          
          // 确保新分类存在
          if (!jsonData.value[editValue.value]) {
            if (Array.isArray(jsonData.value[category])) {
              jsonData.value[editValue.value] = [];
            } else {
              jsonData.value[editValue.value] = {};
            }
          }
          
          // 添加到新分类
          if (Array.isArray(jsonData.value[editValue.value])) {
            jsonData.value[editValue.value].push(oldData);
          } else {
            jsonData.value[editValue.value] = oldData;
          }
        } else {
          // 更新其他字段
          if (Array.isArray(jsonData.value[category])) {
            // 如果是数组，更新特定索引的数据
            const keys = dataIndex.split('.');
            let current = jsonData.value[category][index];
            for (let i = 0; i < keys.length - 1; i++) {
              if (!current[keys[i]]) {
                current[keys[i]] = {};
              }
              current = current[keys[i]];
            }
            current[keys[keys.length - 1]] = editValue.value;
          } else {
            // 如果是对象，直接更新字段
            const keys = dataIndex.split('.');
            let current = jsonData.value[category];
            for (let i = 0; i < keys.length - 1; i++) {
              if (!current[keys[i]]) {
                current[keys[i]] = {};
              }
              current = current[keys[i]];
            }
            current[keys[keys.length - 1]] = editValue.value;
          }
        }
      } else {
        // 更新普通对象
        const updatedData = unflattenObject(targetRow);
        jsonData.value = updatedData;
      }
    }
  }
  
  editableCell.value = '';
};

// 保存整个表格数据
const saveData = () => {
  emit('save', jsonData.value);
};

// 监听数据变化
watch(() => props.data, (newData) => {
  console.log('数据变化:', newData);
  jsonData.value = JSON.parse(JSON.stringify(newData));
  updateTable();
}, { immediate: true, deep: true });

// 组件挂载后执行
onMounted(() => {
  console.log('组件已挂载，初始数据:', props.data);
});
</script>

<style scoped>
.editable-cell {
  cursor: pointer;
  padding: 5px;
}
.editable-cell:hover {
  background-color: #f5f5f5;
}
.debug-info {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f8f9fa;
  border: 1px solid #ddd;
  border-radius: 4px;
}
</style>